<template>
  <el-container>
    <el-header>
      <span>北洋园体育馆场地管理系统</span>
      <el-button type="text" @click="exit">退出登录</el-button>
    </el-header>

    <el-container>
      <el-aside>
        <el-menu>
          <el-submenu index="1">
            <template>
              <span slot="title"  class="systemManage-box"
                ><i class="el-icon-s-custom" style="font-size: 20  px;"></i>场地预定信息
              </span>
            </template>

            <router-link to="/adminBadminton">
              <el-menu-item index="1-1">
                <i class="el-icon-search"></i>羽毛球馆
              </el-menu-item>
            </router-link>

            <router-link to="/adminVolleyball">
              <el-menu-item index="1-2">
                <i class="el-icon-search"></i>排球馆
              </el-menu-item>
            </router-link>

            <router-link to="/adminPingpang">
              <el-menu-item index="1-3">
                <i class="el-icon-search"></i>乒乓球馆
              </el-menu-item>
            </router-link>

            <router-link to="/adminTennis">
              <el-menu-item index="1-4">
                <i class="el-icon-search"></i>网球馆
              </el-menu-item>
            </router-link>

            <router-link to="/adminBasketball">
              <el-menu-item index="1-5">
                <i class="el-icon-search"></i>篮球馆
              </el-menu-item>
            </router-link>
          </el-submenu>

          
        </el-menu>
      </el-aside>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Common from "../../utils/Common.vue";
export default {
  methods:{
    exit(){
      this.$confirm('是否退出登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
        this.$axios({
          headers: {
                "token":this.$store.state.token,
                "username":this.$store.state.username,
              },
          method:"DELETE",
          url:Common.base_url + "/user/token",
        }).then((res) => {
          console.log(res.data);
          if(res.data.code==200){
            console.log("退出登录");
            this.$router.push("/adminLogin");
            this.$message({
            type: "success",
            message: "退出登录成功!",
            });
            this.$store.commit("token",'')
          }
          else if(res.data.code==500){
                this.$message({
                  message: res.data.message,
                  type: "error",
                })
              } 
          
        })
        
        
      })
      .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    }
  }
};
</script>

<style>
.el-container {
  height: 100%;
}

.el-header {
  background-color: rgb(36, 36, 36);
  color: rgb(240, 231, 231);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 25px;
}

.el-aside {
  background-color: #f8f1d3;
  color: rgb(182, 172, 172);
  text-align: center;
  width: 200px;
  height: 660px;
  font-size: 20px;
}

.el-main {
  background-color: #f0f0e4;
  color: rgb(151, 144, 144);
  height: 660px;
}
.el-submenu,
.el-menu-item {
  background: #f5f4ec;
  color: rgb(197, 191, 191);
  font-size: 20px;
}

.router-link-active {
  text-decoration: none;
}
a {
  text-decoration: none;
}
.systemManage-box {
  font-size: 20px;
  color: rgb(194, 193, 193);
}
</style>